<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
        <view>
            <view class="search-column flex-row flex-y-center">
                <view class="search-column-left flex-grow-1 flex-y-center">
                    <view class="search-column-icon flex-y-center">
                        <image :src="data.__wxapp_img.pt.search.url"></image>
                    </view>
                    <view class="search-column-input flex-y-center">
                        <input @confirm="toSearch" @focus="newSearch" confirmType="搜索" focus="true" :value="data.keyword"></input>
                    </view>
                </view>
                <view @tap="cancelSearchValue" class="cancel-search flex-grow-0 flex-y-center flex-x-center">
                    取消
                </view>
            </view>
            <view style="height:100upx;"></view>
            <view class="history" v-if="data.history_show">
                <view class="history-top flex-row">
                    <view class="history-top-left flex-grow-1">
                        历史搜索
                    </view>
                    <view @tap="clearHistoryInfo" class="history-top-right flex-grow-0">
                        <image :src="data.__wxapp_img.pt.search_clear.url"></image>
                    </view>
                </view>
                <view class="history-info">
                    <view @tap="historyItem" class="history-item" :data-keyword="item" v-for="(item,index) in data.history_info" :key="item.id">
                        {{item}}
                    </view>
                </view>
            </view>
            <view class="goods" v-if="!data.history_show">
                <navigator class="list-item flex-row" openType="navigate" :url="'/pages/pt/details/details?gid='+item.id" v-for="(item,index) in data.list" :key="item.id">
                    <view class="flex-grow-0 corver-pic">
                        <image :src="item.cover_pic"></image>
                    </view>
                    <view class="flex-grow-1 flex-col">
                        <view class="flex-grow-1 goods-title">
                                {{item.name}}
                            </view>
                        <view class="flex-grow-0 flex-row">
                            <view class="group-item" v-if="item.groupList[0]">
                                <view v-for="(group,i) in item.groupList" :key="group.id">
                                    <image :src="group.avatar_url"></image>
                                </view>
                            </view>
                            <view class="goods-sales">
                                    已团 {{item.virtual_sales}}
                                </view>
                        </view>
                        <view class="flex-grow-0 flex-row flex-y-bottom">
                            <view class="flex-grow-0 price flex-row flex-y-bottom">
                                <view class="unit flex-grow-0 flex-y-bottom">
                                        ¥
                                    </view>
                                <view class="flex-grow-1 flex-y-bottom">{{item.price}}</view>
                            </view>
                            <view class="flex-grow-1 old-price flex-y-bottom">
                                    ¥ {{item.original_price}}
                                </view>
                            <view class="flex-grow-0 group-btn flex-x-center flex-y-center">
                                    去开团
                                </view>
                        </view>
                    </view>
                </navigator>
                <view :class="['loading-bar', data.show_loading_bar?'active':'']" style="text-align: center;">
                    <image :src="data.__wxapp_img.system.loading.url" style="width: 160upx;height: 80upx"></image>
                </view>
                <view class="empty-bar flex-row flex-x-center" :style="data.emptyGoods?'':'display:none'">
                    没有更多商品了~
                </view>
            </view>
        </view>
    </view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = 1;
	export default {
		data() {
			return {
				data: {
        history_show: !1,
        search_val: "",
        list: [],
        history_info: [],
        show_loading_bar: !1,
        emptyGoods: !1,
        newSearch: !0
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
        var o = this;
        myVue.getApp.core.getStorage({
            key: "history_info",
            success: function(t) {
                t.data.length > 0 && o.setData({
                    history_info: t.data,
                    history_show: !0
                });
            }
        });
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(o) {
        myVue.getApp.page.onReachBottom(this);
        var a = this;
        a.data.emptyGoods || (a.data.page_count <= t && a.setData({
            emptyGoods: !0
        }), t++, a.getSearchGoods());
    },
		methods: {
			toSearch: function(t) {
        var o = t.detail.value, a = this;
        if (o) {
            var e = a.data.history_info;
            e.unshift(o);
            for (var s in e) {
                if (e.length <= 20) break;
                e.splice(s, 1);
            }
            myVue.getApp.core.setStorageSync(myVue.getApp.const.HISTORY_INFO, e), a.setData({
                history_info: e,
                history_show: !1,
                keyword: o,
                list: []
            }), a.getSearchGoods();
        }
    },
    cancelSearchValue: function(t) {
        myVue.getApp.core.navigateBack({
            delta: 1
        });
    },
    newSearch: function(o) {
        var a = this, e = !1;
        a.data.history_info.length > 0 && (e = !0), t = 1, a.setData({
            history_show: e,
            list: [],
            newSearch: [],
            emptyGoods: !1
        });
    },
    clearHistoryInfo: function(t) {
        var o = this, a = [];
        myVue.getApp.core.setStorageSync(myVue.getApp.const.HISTORY_INFO, a), o.setData({
            history_info: a,
            history_show: !1
        });
    },
    getSearchGoods: function() {
        var o = this, a = o.data.keyword;
        a && (o.setData({
            show_loading_bar: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.search,
            data: {
                keyword: a,
                page: t
            },
            success: function(a) {
                if (0 == a.code) {
                    if (o.data.newSearch) e = a.data.list; else var e = o.data.list.concat(a.data.list);
                    o.setData({
                        list: e,
                        page_count: a.data.page_count,
                        emptyGoods: !0,
                        show_loading_bar: !1
                    }), a.data.page_count > t && o.setData({
                        newSearch: !1,
                        emptyGoods: !1
                    });
                }
            },
            complete: function() {}
        }));
    },
    historyItem: function(t) {
        var o = t.currentTarget.dataset.keyword, a = this;
        a.setData({
            keyword: o,
            history_show: !1
        }), a.getSearchGoods();
    }
		},
	}
</script>

<style scoped>
page {
    background-color: #f7f7f7;
}

.search-column {
    background-color: #efeff4;
    padding: 0 24upx;
    height: 100upx;
    position: fixed;
    top: var(--window-top);
    width: 100%;
    z-index: 99;
}

.search-column-left {
    background-color: #fff;
    height: 64upx;
    border-radius: 28upx;
    padding: 0 24upx;
    border: 1upx solid #bbb;
}

.search-column-icon image {
    width: 28upx;
    height: 28upx;
}

.search-column-input {
    width: 100%;
    margin-left: 24upx;
    line-height: 1;
    height: 100%;
}

.search-column-input input {
    width: 100%;
    color: #353535;
    font-size: 28upx;
}

.cancel-search {
    color: #00c203;
    font-size: 34upx;
    margin-left: 24upx;
}

.history {
    background-color: #fff;
    padding: 0 24upx;
}

.history-top {
    padding: 34upx 0 24upx 0;
}

.history-top-left {
    font-size: 32upx;
    color: #666;
}

.history-top-right image {
    height: 38upx;
    width: 30upx;
}

.history-item {
    height: 60upx;
    background-color: #eee;
    padding: 0 20upx;
    color: #333;
    display: inline-block;
    margin: 0 20upx 16upx 0;
    border-radius: 10upx;
    line-height: 60upx;
}

.goods {
    background-color: #fff;
}

.list-item {
    padding: 24upx;
    border-bottom: 1upx solid #e2e2e2;
}

.list-item .corver-pic image {
    width: 220upx;
    height: 220upx;
    border-radius: 5upx;
    margin-right: 24upx;
}

.goods-title {
    color: #353535;
    font-size: 11pt;
}

.list-item .group-item image {
    width: 34upx;
    height: 34upx;
    border: 1upx solid #ffffff;
    border-radius: 17upx;
}

.list-item .group-item view {
    float: left;
    width: 24upx;
}

.group-item {
    margin-right: 12upx;
}

.goods-sales {
    font-size: 10pt;
    color: #ff5c5c;
}

.list-item .price {
    color: #ff5c5c;
    font-size: 14pt;
    margin-right: 16upx;
    line-height: 1;
}

.list-item .price .unit {
    font-size: 9pt;
}

.list-item .old-price {
    font-size: 10pt;
    color: #919191;
    text-decoration: line-through;
    line-height: 1;
}

.list-item .group-btn {
    height: 66upx;
    width: 180upx;
    color: #ffffff;
    font-size: 12pt;
    border-radius: 10upx;
    background-color: #ffa360;
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,#ffa360),color-stop(140%,#ff5c5c));
    background-image: linear-gradient(140deg,#ffa360,#ff5c5c);
}

.loading-bar {
    visibility: hidden;
}

.loading-bar.active,empty-bar {
    visibility: visible;
}

.empty-bar {
    height: 80upx;
    color: #919191;
}
</style>
